<template>
  <div class="searchResult">
    <!-- 头部区域 -->
     <van-nav-bar left-arrow @click-left="onClickLeft" :fixed="true" title="搜索结果" class="i-title" z-index="99" />
    <!-- 下拉加载 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <!-- 文章部分 -->
     <van-cell @click="toDetail(item)" v-for="(item, index) in searchList" :key="index">
            <!-- 文章渲染 -->
            <template #title>
              <h3>{{item.title}}</h3>
              <van-grid :border="false" v-if="item.cover.type !== 0" :column-num = "3">
                <van-grid-item v-for="(imgitem, imgindex) in item.cover.images" :key="imgindex">
                  <van-image v-lazy="imgitem" :src="imgitem" />
                </van-grid-item>
              </van-grid>
              <!-- 其他信息 -->
              <div class="title">
                <div class="left">
                  <span>{{ item.aut_name }}</span>
                  <span>{{item.comm_count}}评论</span>
                  <span>{{ item.pubdate | timefilter }}</span>
                </div>
              </div>
              <!-- 操作按钮 -->
              <van-grid direction="horizontal" :column-num="3">
                <van-grid-item icon="comment-o" @click="comm">
                  <template #text>
                  <div class="txt">{{item.comm_count}}</div>
                  </template>
                </van-grid-item>
                <van-grid-item icon="like-o" text="点赞" />
                <van-grid-item icon="exchange" text="分享" />
              </van-grid>
            </template>
          </van-cell>
    </van-list>
  </div>
</template>

<script>
import { apiSearchResult } from '@/api/search.js'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      // 搜索结果保存
      searchList: [],
      page: 1,
      perpage: 10,
      total: 0
    }
  },
  methods: {
    async onLoad () {
      console.log('onload')
      const res = await apiSearchResult({
        page: this.page,
        parpage: this.parpage,
        key: this.$route.params.key
      })
      window.console.log('搜索结果', res)
      this.searchList = [...this.searchList, ...res.data.data.results]
      // 总条数
      this.total = res.data.data.total_count
      // 显示加载状态
      this.loading = false
      // 当前页面+1
      this.page++
      // 判断list的数据源是否加载完毕
      if (this.total === this.searchList.length) {
        this.finished = true
      }
    },
    onClickLeft () {
      // 回退到上一页
      this.$router.back()
    },

    // 评论
    comm () {
      // // 得到token
      // const token = this.$store.state.userInfo.token
      // window.console.log(token)
      // // 判断有无token 是否登录
      // if (!token) {
      //   this.$toast('您还未登陆无法查看')
      //   this.$router.push('/')
      // }
      if (!this.$login()) {
        // 结束后续代码的执行
        return
      }
      window.console.log('留言')
    },
    // 跳转详情页
    toDetail (item) {
      window.console.log(item)
      this.$router.push(`/detail/${item.art_id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.searchResult{
  margin-top: 46px;
  margin-bottom: 50px;
  .i-title {
        background-color: #3e9df8;
        /deep/ .van-nav-bar__title {
            color: #fff;
        }
        /deep/.van-icon {
            color: #fff;
        }
    }
  .txt{
    margin-left: 5px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    .left {
      span {
        margin-right: 10px;
      }
    }
  }
}
</style>
